<template>
    <div class="container">
        
            <div class="order_item" v-for="order in orders" :key="order.id">
                <div class="header">
                        <p class="create_time">订单时间{{order.created_at}}</p>
                        <p class="status">{{getStatus(order.status)}}</p>
                </div>
                    <van-card
                    v-for="goods in order.order_goods_info" :key="goods"
                        :num="goods.count"
                        :price="((goods.goods_info.price ||0)/100).toFixed(2)"
                         :desc="goods.goods_info.detail_info"
                       :title="goods.goods_info.name"
                        :thumb="goods.goods_info.pic_url"
                            />
                <div class="footer">
                    <div v-if="order.status!==1">
                        支付方式:{{getPayType(order.pay_type)}}
                    </div>
                    <div>
                      总金额：￥  {{(order.price/100).toFixed(2)}}
                    </div>
                </div>
            </div>
    </div>
       
</template>
<script setup>
import {orderList} from '@/api/order'
import {onMounted,ref,defineProps } from 'vue'
let props = defineProps({
    status:{
        type:Number
    }
})
let getStatus=(status)=>{
    switch(status){
        case 1 :return "待支付";
        case 2 :return "待发货";
        case 3 :return "待收货";
        case 4 :return "待评价";
    }
}
let getPayType=(type)=>{
    switch(type){
        case 1 :return "微信";
        case 2 :return "支付宝";
        case 3 :return "云闪付";
       
    }
}
let orders = ref([])
onMounted(async ()=>{
   let res = await orderList({page:1,limit:100,status:props.status})
   orders.value = res.data.list||[]
})
</script>
<style lang="scss" scoped>
.container {
  --van-card-background: #f0f0f0;
  .order_item {
    padding: 10px;
    margin: 10px;
    background: #fff;
    border-radius: 12px;
    .header {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      .create_time {
        color: #2f3640;
      }
      .status {
        color: #353b48;
      }
    }
    .goods_item {
      margin: 5px 0;
      background: #f0f0f0;
      border-radius: 10px;
    }
    .footer {
      font-size: 10px;
      color: #2f3640;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 2px;
    }
  }
}
</style>
